<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="shortcut icon" href="#"/>
</head>
<body>
书刊名(模糊查)：<input type="text" id="bookName" >  书刊类型:<input type="text" id="bookType"> <input type="button" onclick="loadBooks()" value="查询">
<table border="1px" >
    <tr>
        <th>名称</th>
        <th>isbn</th>
        <th>作者</th>
        <th>出版社</th>
        <th>图片</th>
        <th>购买页</th>
    </tr>
    <tbody id="myTableBody">
    <!--把服务器返回的数据加载到该代码中-->

    </tbody>
    <tfoot>
         <tr>
             <td colspan="6">
                 <input type="button" onclick="prevPage()" value="上一页">
                 第<strong id="currentPage"></strong>页|
                 每页显示<strong id="pageSize"></strong>条|
                 共<strong id="totalPage"></strong>页|
                 共<strong id="totalCount"></strong>条|
                 <input type="button" onclick="nextPage()" value="下一页">
             </td>
         </tr>


    </tfoot>


</table>
</body>
</html>

<script type="text/javascript">
    let currentPage=1;

    function prevPage() {
        if (currentPage==1){
            return;
        }
        currentPage-=1;
        loadBooks();

    }
    function nextPage() {
        if (currentPage==document.getElementById("totalPage").innerHTML){
            return;
        }
        currentPage+=1;
        loadBooks();

    }

    function loadBooks() {

      let bookname= document.getElementById("bookName").value;

      let booktype= document.getElementById("bookType").value;

      //1.得到ajax异步请求对象
      let xmlHttpRequest = new XMLHttpRequest();

      //2.建立连接
      xmlHttpRequest.open("GET","/BookServlet2?currentPage="+currentPage+"&booktype="+booktype+"&bookname="+bookname);

      //3.设置请求头
      xmlHttpRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

      //4.发送请求
      xmlHttpRequest.send(null);

      //5.给onreadystatechangen属性注册回调函数 ，接受后端数据
      xmlHttpRequest.onreadystatechange=function () {

          if (xmlHttpRequest.readyState==4){

             let jsonutil= JSON.parse(xmlHttpRequest.responseText);

             if (jsonutil.code==1){
                 alert(jsonutil.msg);
                 return;
             }

              document.getElementById("myTableBody").innerHTML="";

              let arrays=jsonutil.data.data;
             for (let i=0;i<arrays.length;i++){
                 let tr=  document.createElement("tr");

                 let td1=  document.createElement("td");
                 let td2=  document.createElement("td");
                 let td3=  document.createElement("td");
                 let td4=  document.createElement("td");
                 let td5=  document.createElement("td");
                 let td6=   document.createElement("td");

                 tr.appendChild(td1); tr.appendChild(td2); tr.appendChild(td3);
                 tr.appendChild(td4); tr.appendChild(td5);tr.appendChild(td6);


             // <th>名称</th>
             //     <th>isbn</th>
             //     <th>作者</th>
             //     <th>出版社</th>
             //     <th>图片</th>
             //     <th>购买页</th>

                 td1.innerHTML=arrays[i].book_name;
                 td2.innerHTML = arrays[i].isbn;
                 td3.innerHTML = arrays[i].author;
                 td4.innerHTML = arrays[i].publish;
                 td5.innerHTML = "<img width='20px' src='"+arrays[i].pic_url+"' />"
                 td6.innerHTML =  "<a href='"+arrays[i].book_url+"'>点击购买</a>"


             document.getElementById("myTableBody").appendChild(tr)

                 // 第<strong id="currentPage"></strong>页|
                 // 每页显示<strong id="pageSize"></strong>条|
                 // 共<strong id="totalPage"></strong>页|
                 // 共<strong id="totalCount"></strong>条|

                 currentPage = jsonutil.data.currentPage;
                 document.getElementById("currentPage").innerHTML = jsonutil.data.currentPage;
                 document.getElementById("pageSize").innerHTML = jsonutil.data.pageSize;
                 document.getElementById("totalPage").innerHTML = jsonutil.data.totalPage;
                 document.getElementById("totalCount").innerHTML = jsonutil.data.totalRecord;

             }
          }
      }


  }
    loadBooks();

</script>